// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

import { e_card_color, e_card_score, I_card } from "../common/cardLogic";
import { CardSelect } from "./cardSelect";


const { ccclass, property } = cc._decorator;

@ccclass
export class CardPrefab extends cc.Component {
    @property(cc.Sprite)
    private colorSprite: cc.Sprite = null;
    @property(cc.Sprite)
    private scoreSprite: cc.Sprite = null;

    @property(cc.Sprite)
    private colorRightDownSprite: cc.Sprite = null;
    @property(cc.Sprite)
    private scoreRightDownSprite: cc.Sprite = null;

    @property(cc.Sprite)
    private coverSprite: cc.Sprite = null;

    public baseY = 50;    // 基础 y

    id: number = 0;

    cb: any = null

    index: number = 0;

    init(info: I_card, position: {x: number, y: number} = null, index: number = 0): void {
        // this.name = '' + index
        this.id = info.id;
        this.node.y = CardSelect.instance.baseY;
        this.node.x = position?.x
        this.index = index
        console.log('index = ' + index)
        this.node.name = info.id.toString();

        cc.resources.load("imgs/color/" + info.color, cc.SpriteFrame, (err, img: cc.SpriteFrame) => {
            if (err || !cc.isValid(this)) {
                return;
            }
            this.colorSprite.spriteFrame = img;
            this.colorRightDownSprite.spriteFrame = img;
        });
        if (info.score === e_card_score.kings || info.score === e_card_score.kingb) {
            this.colorSprite.node.active = false;
            this.colorRightDownSprite.node.active = false;
        }

        let str = "";
        // 
        if (info.color === e_card_color.black || info.color === e_card_color.flower) {
            str = "imgs/numB/" + info.score;
        } else {
            str = "imgs/numR/" + info.score;
        }
        cc.resources.load(str, cc.SpriteFrame, (err, img: cc.SpriteFrame) => {
            if (err || !cc.isValid(this)) {
                return;
            }
            this.scoreSprite.spriteFrame = img;
            this.scoreRightDownSprite.spriteFrame = img;
        });

        this.scheduleOnce(function() {
            // 这里的 this 指向 component
            // console.log(this.node.x, this.index);
            let x = this.node.x + (this.index * 20)
            // console.log('x = ' + x);

            cc.tween(this.coverSprite.node)
                .to(1, {opacity: 0})
                // .by(1, { scale: 0.5 })
                .start();

            cc.tween(this.node)
                .to(1, { position: cc.v2(x, -200), scale: 0.5, })
                // .by(1, { scale: 0.5 })
                .start();
        }, 1);
    }

    onTouchEnd(callback: any) {
        this.cb = callback
    }

    move(x: any, y: any) {
        // console.log('move '+ x)
        // console.log('move '+ y)
        let rotation = cc.math.randomRangeInt(0, 360);
        cc.tween(this.node)
            .to(0.4, { position: cc.v3(x, y, 0), scale: 0.5})
            // .to(0.4, { position: cc.v3(x, y, 0), scale: 0.5, rotation: rotation})
            // .by(1, { scale: 0.5 })
            .start();
        // this.scheduleOnce(function() {
        //     // 这里的 this 指向 component
        //     // console.log(this.node.x, this.index);
        //     // let x = this.node.x + (this.index * 20)
        //     console.log('x = ' + x);

        //     // cc.tween(this.coverSprite.node)
        //     //     .to(3, {opacity: 0})
        //     //     // .by(1, { scale: 0.5 })
        //     //     .start();

            
        // }, 1);
    }

    init_with_cb(info: I_card, callback: any) {
        this.init(info)
        this.cb = callback
    }

    init_with_pos(info: I_card, pos: {x: number, y: number}, index: number) {
        this.init(info, pos, index)
        return this;
    }

    start() {
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.touch_end, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this.touch_end, this);
    }

    onDestroy() {
        // this.node.off(cc.Node.EventType.TOUCH_START, this.touch_start, this);
        // this.node.off(cc.Node.EventType.TOUCH_MOVE, this.touch_move, this);
        this.node.off(cc.Node.EventType.TOUCH_CANCEL, this.touch_end, this);
        this.node.off(cc.Node.EventType.TOUCH_END, this.touch_end, this);
    }

    private touch_end(e: cc.Event.EventTouch) {
        console.log('touch_end = ' + this.id)
        this.cb(this);
        // let children = this.node.children;
        // if (!this.startCard) {
        //     for (let one of children) {
        //         one.y = this.baseY;
        //     }
        //     return;
        // }
        // let indexArr = this.getIndexArr(this.startCard, this.endCard);
        // for (let i = indexArr[0]; i <= indexArr[1]; i++) {
        //     let node = children[i];
        //     node.getChildByName("grey").active = false;
        // this.node.y = this.node.y === this.baseY ? this.baseY + 30 : this.baseY;
        // console.log('touch_end: y: ' + this.node.y)
        // if (this.cb)
        //     this.cb(this.id)
        // }
        // this.startCard = null;
        // this.endCard = null;
    }
}